<template>
    <div class="project-gaishu">
      <div v-html="htmlRenderValue" class="ql-editor"></div>
    </div>
</template>
<script lang="ts" setup>
  import {screenStore} from '~/stores/modules/screen'
  const scrStore = screenStore()
  const htmlRenderValue = ref('')
  onMounted(()=>{
    htmlRenderValue.value = scrStore.selProjectObj.projectDesc
  })
</script>

<style scoped lang="less">
  @import "quill/dist/quill.snow.css";
  /* 针对 Quill 生成的居中类添加样式 */
  .project-gaishu .ql-editor ::v-deep .ql-align-center {
    text-align: center !important;
  }

  /* 确保图片在居中容器内正确显示 */
  .project-gaishu .ql-editor ::v-deep .ql-align-center img {
    display: inline-block !important; /* 关键：避免图片默认块级元素导致的居中失效 */
    margin: 0 auto !important;
  }
</style>
